<!-- 老人信息查询 -->
<template>
  <!-- 面包屑 -->
  <div style="margin: 20px;">
    <el-breadcrumb separator="/" style="line-height:35px">
      <el-breadcrumb-item><span style="color: #7A7A7A;">服务管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #7A7A7A;">接待管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #0468FF;font-weight: bold">老人信息查询</span></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!-- 搜索卡片 -->
  <el-card style="margin: 20px;height: 200px;border: 0" shadow="never">
    <el-form>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="档案编码">
            <el-input placeholder="请输入档案编码" v-model="searchForm.id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="老人姓名">
            <el-input placeholder="请输入老人姓名" v-model="searchForm.patientName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码">
            <el-input placeholder="请输入老人证件号" v-model="searchForm.idNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="电话号码">
            <el-input placeholder="请输入老人电话号" v-model="searchForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="亲属姓名">
            <el-input placeholder="请输入亲属姓名" v-model="searchForm.familyName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="亲属电话">
            <el-input placeholder="请输入亲属电话" v-model="searchForm.familyPhone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="在院状态">
            <el-select placeholder="请选择状态" v-model="searchForm.status">
              <el-option label="全部" value=""></el-option>
              <el-option label="在院中" value="在院中"></el-option>
              <el-option label="已出院" value="已出院"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入院时间">
            <el-date-picker
                type="date"
                placeholder="请选择日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD"
                v-model="searchForm.checkInTime"
                style="width: 300px;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="primary" @click="loadPatient">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>

  <!-- 列表 -->
  <el-card style="margin:20px;border: 0" shadow="never">
    <el-table :data="currentTableData" height="550px"
              :row-style="{'height':'50px'}"
              :cell-style="{'color':'#000'}"
              :header-cell-style="{
                'background-color': '#f2f2f2',
                'color': '#000',
                'height':'50px'
              }">
      <el-table-column prop="id" label="档案编码" align="center"/>
      <el-table-column prop="patientName" label="老人姓名" align="center"/>
      <el-table-column prop="gender" label="性别" align="center"/>
      <el-table-column prop="age" label="年龄" align="center"/>
      <el-table-column prop="status" label="在院状态" align="center"/>
      <el-table-column prop="checkInTime" label="入院时间" align="center" width="250"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="searchArchives(scope.row.id)">档案查询</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        style="margin-top: 20px;margin-left: 5px;"
    />
  </el-card>

</template>

<script setup>
import {onMounted, ref} from "vue";

//搜索栏数据
const searchForm = ref({
  id: '',
  patientName: '',
  idNumber: '',
  phone: '',
  familyName: '',
  familyPhone: '',
  status: '',
  checkInTime: ''
});
//重置搜索栏
const resetSearch = () => {
  searchForm.value = {
    id: '',
    patientName: '',
    idNumber: '',
    phone: '',
    familyName: '',
    familyPhone: '',
    status: '',
    checkInTime: ''
  }
  loadPatient();
}
//表格数据
const tableData = ref([]);
const currentTableData = ref([]) // 当前页显示的数据
const currentPage = ref(1)      // 当前页码
const pageSize = ref(10)        // 每页条数

//加载表格数据
const loadPatient = () => {
  for (let i = 0; i < 15; i++) {
    tableData.value.push({
      id: 'JK20180606001',
      patientName: '刘姥姥',
      gender: '女',
      age: '69',
      status: '在院中',
      checkInTime: '2018-06-06 09:01:50'
    })
  }
}
onMounted(() => {
  loadPatient()
})

// 获取数据（示例）
const fetchData = async () => {
  // 这里替换为你的API请求
  // dataTable.value = await api.getData();
  updateCurrentData();
}

// 更新当前页数据
const updateCurrentData = () => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  currentTableData.value = tableData.value.slice(start, end)
}

// 每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  updateCurrentData()
}

// 页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  updateCurrentData()
}

// 生命周期钩子
onMounted(() => {
  fetchData()
})

const searchArchives = (id) => {

}

</script>

<style scoped>
.el-row {
  margin: 8px auto;
}
</style>